<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="">
    <iframe src="https://www.taobao.com/" frameborder="0" width="1000" id="box"></iframe>
    <script>
        //         ## 其他 事件

        // onload：当页面或者资源完全加载后在 window 上面触发
        // onscroll：当用户滚动带滚动条的元素时触发


        // --input
        // onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发
        // oninput：当文本框(input 或 textarea)内容改变
        // onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发	
        // onblur：当页面或元素失去焦点时在 window 及相关元素上触发

        // onresize：当窗口或框架的大小变化时在 window 或框架上触发


        var ipt = document.querySelector("input");

        // onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发	
        ipt.onfocus = function () {
            console.log('获取焦点');
        }

        // onblur：当页面或元素失去焦点时在 window 及相关元素上触发
        ipt.onblur = function () {
            console.log('失去焦点');
        }




        // oninput：当文本框(input 或 textarea)内容改变
        ipt.oninput = function () {
            console.log('aa');
            console.log(this.value);
        }


        // onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发
        ipt.onchange = function () {
            console.log('onchange');
        }


        // onresize：当窗口或框架的大小变化时在 window 或框架上触发
        window.onresize = function () {
            console.log('onresize');
        }

        var box = document.querySelector('#box')
        box.onresize = function () {
            console.log('iframe 大小改变');
        }


    </script>

</body>

</html>